<template>
  <div class="tab-box tab-container">
    <div class="btn-container">
      <el-button link @click="save" type="primary" v-if="showBtn">
        保存
      </el-button>

      <!-- <el-button link @click="refresh" type="primary" v-if="!isBill && showBtn">
        刷新
      </el-button> -->
      <el-button link @click="cancle" type="primary" v-if="showBtn">
        取消
      </el-button>
      <el-button link @click="edit" type="primary" v-if="!showBtn">
        编辑
      </el-button>
      <el-button link @click="save" type="primary" v-if="!showBtn && isBill">
        导出
      </el-button>
    </div>

    <el-dropdown
      style="margin-left: 10px"
      @command="exportWaybill"
      v-if="!showBtn && !isBill"
    >
      <span class="el-dropdown-link">
        订舱操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="1" style="min-width: 88px"
            >导出托单</el-dropdown-item
          >
          <el-dropdown-item command="2" style="min-width: 88px"
            >导出并发送邮件</el-dropdown-item
          >

          <el-dropdown-item command="-1">回填订舱信息</el-dropdown-item>
          <el-dropdown-item command="2" style="min-width: 88px"
            >退关</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import {
  defineComponent,
  computed,
  onMounted,
  reactive,
  ref,
  provide,
  onDeactivated,
  onUnmounted
} from 'vue'

const props = defineProps({
  dataID: {
    type: String,
    default: ''
  },
  showBtn: {
    type: Boolean,
    default: false
  },
  // controlBooking: {
  //   type: Boolean,
  //   default: false
  // },
  // 是否是提单详情引入
  isBill: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits([
  'refresh',
  'copy',
  'file',
  'log',
  'edit',
  'save',
  'exportWaybill'
])

function edit() {
  console.log('ccccccccccc')
  emits('edit', true)
}

function exportWaybill(val) {
  console.log(val, 'val')
  if (val == -1) {
    emits('exportWaybill', true)
  }
}

function cancle() {
  emits('cancle')
}

function save() {
  emits('save')
}

function copy() {
  emits('copy')
}

function file() {
  emits('file')
}

function log() {
  emits('log')
}

function refresh() {
  emits('refresh')
}
</script>

<style lang="scss" scoped>
.tab-box {
  height: 32px !important;
  display: flex;
  align-items: center;
  padding: 0px 6px;

  .btn-container {
    :deep(.el-button) {
      // font-weight: bold;
      margin: 0 10px;
      color: #5a9cf8;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: 0px;
    }
  }
}
:deep(.el-button > span) {
  color: #3b78ff;
  font-family: PingFang SC;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0px;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  color: #3b78ff;
  font-family: PingFang SC;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0px;
}
.tab-container {
  border: none;
  border-radius: 2px;
  background: #ffffff;
}
</style>
